{% include "../base/header.html" %}

<div id="app" v-loading="loading" element-loading-text="加载中...">
    <div class="tabs-nav oh">
        <span class="title fl">上线工单添加</span>
        <a href="{{ host }}release/index" class="backup fr">返回</a>
    </div>
    <el-form :model="rule_form" :rules="rules" ref="rule_form" label-width="100px" label-position="top">
        <el-form-item label="标题" prop="title">
            <el-input v-model="rule_form.title" placeholder="上线单标题"></el-input>
        </el-form-item>

        <el-form-item label="项目" prop="project_id">
            <el-select v-model="rule_form.project_id" filterable placeholder="请选择项目" @change="branch_change">
                {% for item in project_list %}
                    <el-option  label="{{ item.project_name }}" value="{{ item.project_id }}"></el-option>
                {% endfor %}
            </el-select>
        </el-form-item>

        <el-form-item label="分支" prop="branch">
            <el-button :plain="true" type="primary" size="mini" @click="branch_refresh" class="refresh-submit">刷新</el-button>
            <el-select v-model="rule_form.branch" filterable placeholder="请选择分支" @change="version_change">
                <el-option v-for="item in branch_list" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="版本" prop="version">
            <el-button :plain="true" type="primary" size="mini" @click="version_refresh" class="refresh-submit">刷新</el-button>
            <el-select v-model="rule_form.version" filterable placeholder="请选择版本">
                <el-option v-for="item in version_list" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
        </el-form-item>

        <div class="form-submit">
            <el-button type="primary" @click="form_submit('rule_form')" :loading="loading_submit">保存</el-button>
            <el-button @click="reset_submit('rule_form')">重置</el-button>
        </div>
    </el-form>
</div>

{% include "../base/footer.html" %}
<script type="text/javascript">
new Vue({
    el : '#app',
    data : {
        loading: false,
        loading_submit: false,
        rule_form: {
            csrfmiddlewaretoken: '{{ csrf_token }}' ,
            title: '',
            project_id : '',
            branch: '',
            version: '',
            status: 0
        },
        rules: {
            title: [
                { required: true, message: '请填写标题', trigger: 'blur' },
                { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
            ],
            project_id: [
                { required: true, message: '请选择项目', trigger: 'change' }
            ],
            branch: [
                { required: true, message: '请选择分支', trigger: 'change' }
            ],
            version: [
                { required: true, message: '请选择版本', trigger: 'change' }
            ]
        },
        branch_list : [],
        version_list : []
    },

    // 操作方法
    methods : {
        /**
         * [form_submit 表单提交]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-10T09:44:52+0800
         * @param    {[string]}                 form_name [form名称]
         */
        form_submit : function(form_name)
        {
            this.$refs[form_name].validate((valid) =>
            {
                if(!valid)
                {
                    this.$message({
                        showClose: true,
                        message: '请输入正确的数据',
                        type: 'warning'
                    });
                    return false;
                    
                }

                this.loading = true;
                this.loading_submit = true;
                this.$http.post(__host__+'release/save', this.rule_form, {emulateJSON: true}).then((response) =>
                {
                    this.loading = false;
                    var type = (response.data.code == 0) ? 'success' : 'error';
                    this.$message({
                        showClose: true,
                        message: response.data.msg,
                        type: type
                    });
                    if(response.data.code == 0)
                    {
                        setTimeout(function()
                        {
                            window.location.href=__host__+'release/index';
                        }, 1500);
                    } else {
                        this.loading_submit = false;
                    }
                }, (response) =>
                {
                    this.$message({
                        showClose: true,
                        message: error_msg,
                        type: 'error'
                    });
                    this.loading = false;
                    this.loading_submit = false;
                });
            });
        },
        
        /**
         * [reset_submit 表单重置]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-10T09:44:52+0800
         * @param    {[string]}                 form_name [form名称]
         */
        reset_submit : function(form_name)
        {
            this.$refs[form_name].resetFields();
        },

        /**
         * [branch_change 项目选择]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-10T09:44:52+0800
         * @param    {[object]}                 event [默认事件]
         */
        branch_change : function(event)
        {
            // 项目id校验
            if(this.rule_form.project_id.length > 0)
            {
                this.branch_refresh(event);
            }
        },

        /**
         * [branch_refresh 分支刷新-获取分支列表]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-10T09:45:41+0800
         * @param    {[object]}                 event [默认事件]
         */
        branch_refresh : function(event)
        {
            // 项目id校验
            if(this.rule_form.project_id.length == 0)
            {
                this.$message({
                    showClose: true,
                    message: '请选择项目',
                    type: 'warning'
                });
                return false;
            }

            // 数据初始
            this.branch_list = [];
            this.version_list = [];
            if(this.rule_form.branch.length > 0)
            {
                this.rule_form.branch = '';
            }
            if(this.rule_form.version.length > 0)
            {
                this.rule_form.version = '';
            }
            
            // http请求数据
            this.loading = true;
            this.$http.post(__host__+'release/get_branch_list', this.rule_form, {emulateJSON: true}).then((response) =>
            {
                if(response.data.code == 0)
                {
                    this.branch_list = response.data.data;
                } else {
                    this.$message({
                        showClose: true,
                        message: response.data.msg,
                        type: 'error'
                    });

                    // git错误提示信息
                    if(response.data.tips.length > 0)
                    {
                        this.$notify({
                            title: notify_error_title,
                            message: response.data.tips,
                            duration: 0
                        });
                    }
                    this.rule_form.project_id = '';
                }
                this.loading = false;
            }, (response) =>
            {
                this.$message({
                    showClose: true,
                    message: error_msg,
                    type: 'error'
                });
                this.rule_form.project_id = '';
                this.loading = false;
            });
        },

        /**
         * [version_change 分支选择]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-10T09:44:52+0800
         * @param    {[object]}                 event [默认事件]
         */
        version_change : function(event)
        {
            if(this.rule_form.project_id.length > 0 && this.branch_list.length > 0 && this.rule_form.branch.length > 0)
            {
                this.version_refresh(event);
            }
        },

        /**
         * [version_refresh 版本刷新-获取版本列表]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-10T09:45:41+0800
         * @param    {[object]}                 event [默认事件]
         */
        version_refresh : function(event)
        {
            // 项目id校验
            if(this.rule_form.project_id.length == 0)
            {
                this.$message({
                    showClose: true,
                    message: '请选择项目',
                    type: 'warning'
                });
                return false;
            }

            // 项目分支列表校验
            if(this.branch_list.length == 0)
            {
                this.$message({
                    showClose: true,
                    message: '请选择有效项目',
                    type: 'warning'
                });

                this.rule_form.branch = '';
                return false;
            }

            // 分支选择校验
            if(this.rule_form.branch.length == 0)
            {
                this.$message({
                    showClose: true,
                    message: '请选择分支',
                    type: 'warning'
                });
                return false;
            }

            // 数据初始
            this.version_list = [];
            if(this.rule_form.version.length > 0)
            {
                this.rule_form.version = '';
            }

            // http请求数据
            this.loading = true;
            this.$http.post(__host__+'release/get_version_list', this.rule_form, {emulateJSON: true}).then((response) =>
            {
                if(response.data.code == 0)
                {
                    this.version_list = response.data.data;
                } else {
                    this.$message({
                        showClose: true,
                        message: response.data.msg,
                        type: 'error'
                    });

                    // git错误提示信息
                    if(response.data.tips.length > 0)
                    {
                        this.$notify({
                            title: notify_error_title,
                            message: response.data.tips,
                            duration: 0
                        });
                    }
                    this.rule_form.branch = '';
                }
                this.loading = false;
            }, (response) =>
            {
                this.$message({
                    showClose: true,
                    message: error_msg,
                    type: 'error'
                });
                this.rule_form.branch = '';
                this.loading = false;
            });
        }
    }
});
</script>